<template>
  <div class="Cart">
    <div class="color">
      <div>
        <span @click="handleRemove"
          ><van-icon name="arrow-left" />确认订单</span
        >
        <!-- <span style="color: var(--cy-Color)"> {{ addBuy.length }}</span> -->
      </div>
      <!-- @click="on" -->
    </div>
    <!-- <div class="color"> -->
    <!-- <van-count-down millisecond :time="count" format="mm:ss:SS"  /> -->
    <!-- 点击倒计时开始 -->
    <!-- <div class="count">还剩{{ count }}秒</div> -->
    <!-- <input v-trigger class="button" id="nav" type="button" value="增加" @click="start"> -->
    <!-- </div> -->
    <van-contact-card
      type="edit"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="onEdit"
    />
    <!-- <back></back> -->
    <div class="shoplist" v-if="!addBuy.length==0">
      <div class="num">共{{ addBuy.length }}件商品</div>
      <ul class="white">
        <li v-for="item in addBuy" :key="item.item.selectedSkuComb.id">
          <!-- <button @click="handleRemove(item)">不买了</button> -->
          <div class="flex">
            <div class="img">
              <img :src="item.item.selectedSkuComb.imgUrl" alt="图片" />
            </div>
            <div class="text">
              <!-- <h2 class="van-ellipsis">商品标题</h2>
          <h3 class="grey">商品属性</h3> -->
              <h4 style="color: var(--cy-Color); font-size: 14px">
                ￥{{ item.item.selectedSkuComb.price / 100 }}
              </h4>
            </div>
            <div class="count"><van-icon name="cross" />{{ item.count }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="shoplist" v-if="!addItem.length==0">
      <div class="num">共{{ addItem.length }}件商品</div>
      <ul class="white">
        <li v-for="item in addItem" :key="item.item.selectedSkuComb.id">
          <!-- <button @click="handleRemove(item)">不买了</button> -->
          <div class="flex">
            <div class="img">
              <img :src="item.item.selectedSkuComb.imgUrl" alt="图片" />
            </div>
            <div class="text">
              <!-- <h2 class="van-ellipsis">商品标题</h2>
          <h3 class="grey">商品属性</h3> -->
              <h4 style="color: var(--cy-Color); font-size: 14px">
                ￥{{ item.item.selectedSkuComb.price / 100 }}
              </h4>
            </div>
            <div class="count"><van-icon name="cross" />{{ item.count }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div v-else></div>
    <div>
      <div>
        <van-submit-bar
          :price="UnitPrice"
          button-text="提交订单"
          tip-icon="info-o"
          @submit="onsumi"
        >
        </van-submit-bar>
      </div>
    </div>
    <!-- <div v-else class="none">
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="购物车为空，快去购物吧~"
      />
    </div> -->
    <!-- <div>{{loginuser}}</div> -->
    <!-- </div> -->
  </div>
</template>
<script>
// import { Toast } from "vant";
import { Dialog } from "vant";
// import { mapMutations } from "vuex";
import { mapState } from "vuex";
export default {
  name: "Cart",
  props: {
    id: [String, Number],
    // price: Number,
    goods_id: [String, Number],
  },
  data() {
    return {
      temp: false,
      currentContact: {
        name: "张三",
        tel: "13000000000",
      },
      //   count: 1 * 60 * 1000,
      isShow: false,
      //   checkedStatus: "管理",
    //   onsumi: null,
      //   selectedSkuComb: null,
      // goods_id:null,
    };
  },
  created() {
    // this.$store.state.allChecked=false;
    console.log(this.$store.state.allChecked);
    console.log("addBuy=>", this.addBuy);
    console.log("addItem=>", this.addItem);
  },
  watch: {},
  computed: {
    addBuy() {
      return this.$store.state.addBuy;
    },
    UnitPrice() {
      return this.$store.state.UnitPrice;
    },
    addItem() {
      return this.$store.state.addItem;
    },
    ...mapState(["state"]),
  },
  methods: {
    onEdit() {
      this.$router.push({ path: "/address" });
    },
    handleRemove() {
      Dialog.confirm({
        title: "温馨提示",
        message: "离开当前页面后，页面内正在结算的商品会消失。",
      })
        .then(() => {
          this.$store.dispatch("DeleteBuy");
          this.$router.push({ path: "/user" });
        })
        .catch(() => {
          return;
        });
    },  
    onsumi() {
    // Toast("你还没有要结算的商品");
    this.$router.push({path:"/order"});
  },
  },

  mounted() {
    this.$store.state.UnitPrice = 0;
    this.$store.state.addBuy.map((ele) => {
      this.$store.state.UnitPrice += ele.item.selectedSkuComb.price * ele.count;
    });
    this.$store.state.addItem.map((ele) => {
      this.$store.state.UnitPrice += ele.item.selectedSkuComb.price * ele.count;
    });
  },
};
</script>
<style>
.van-checkbox__icon--checked .van-icon {
  background-color: var(--cy-Color);
  border-color: var(--cy-Color);
}
.van-checkbox--label-disabled {
  padding: 10px;
  width: 20px;
  height: 20px;
}

.van-count-down {
  color: white;
  font-size: 40px;
  line-height: 60px;
  position: absolute;
  margin: 0px 30%;
}
</style>
<style lang="less" scoped>
.van-submit-bar__text {
  text-align: left;
}
.button {
  display: none;
}
.color {
  background: var(--cy-Color);
  width: 100%;
  height: 60px;
  position: relative;
  color: white;
  line-height: 60px;
  .count {
    color: white;
    line-height: 60px;
    /* margin: 0 auto; */
    position: absolute;
    left: 30vw;
    /* margin: 0px 30%; */
    font-size: 35px;
  }
}
.shoplist {
  .num {
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid rgb(0 0 0 / 13%);
  }
  .flex {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    font-size: 16px;
    .img {
      width: 75px;
      height: 75px;
      margin: 5px;
      background: var(--cy-Color);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      flex: 1;
      padding: 5px;
      height: 75px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .van-ellipsis {
        font-size: 16px;
      }
      .grey {
        font-size: 12px;
        color: grey;
      }
    }
    .count {
      font-size: 20px;
      padding: 5px;
      color: #999;
    }
  }
}
</style>